import { useState, useEffect } from 'react';
import BarChart from './components/BarChart';
import StrongWarn from '../StrongWarn';
// import TestLodash from 'src/components/lodash/TestLodash.jsx';
import './index.scss';

const Home = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  console.log(isModalOpen, 'isModalOpen')
  
  const option = {
    xAxis: {
      type: 'category',
      data: ['Vue', 'React', 'Angular']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [10, 40, 70],
        type: 'bar'
      }
    ]
  };
  const titleList = [{ text: '三大框架满意度' }, { text: '三大框架使用度' }];

  /* const beforeUnLoad = (e) => {
    e.returnValue = '';
    sessionStorage.setItem('time', new Date().getTime());
  }; */
  
  /* useEffect(() => {
    const newTime = new Date().getTime();
    const leaveTime = Number(sessionStorage.getItem('time'));
    const refresh = (newTime - leaveTime) <= 2000;
    setIsModalOpen(!refresh);
    window.addEventListener('beforeunload', beforeUnLoad);
    
    return () => {
      window.removeEventListener('beforeunload', beforeUnLoad);
    };
  }, []); */

  return (
    <div className="home-page">
      <StrongWarn isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} />
      {/* <TestLodash /> */}
      {titleList.map((title, index) => (
        <BarChart key={index} option={{ ...option, title }} />
      ))}
    </div>
  );
};

export default Home;
